<template>
  <div>
    <el-form :inline="true">
      <el-form-item label="操作类型：">
        <!-- <el-input v-model="billDTO.operationType" placeholder="请选择操作类型"></el-input> -->
        <el-select v-model="billDTO.operationType" placeholder="Select" style="width: 240px">
          <el-option v-for="item in operationType" :key="item" :label="item" :value="item" />
        </el-select>
      </el-form-item>
      <el-form-item label="计划类型：">
        <el-input v-model="billDTO.opPlanType" placeholder="请输入类型关键字"></el-input>
      </el-form-item>
      <el-form-item label="操作时间：">
        <el-input v-model="billDTO.operationTime" placeholder="请输入操作时间"></el-input>
      </el-form-item>

      <el-button type="primary" @click="fetchData()">查询</el-button>
      <el-button type="primary" @click="handleEdit('')">重置</el-button>
    </el-form>
    <!--表格组件-->
    <el-table :data="list" style="width: 100%">
      <!--prop 后端返回的json数据的字段名-->
      <el-table-column prop="operationType" label="操作类型"></el-table-column>
      <el-table-column prop="operationTime" label="操作时间"></el-table-column>
      <el-table-column prop="opPlanType" label="计划类型"></el-table-column>
      <el-table-column prop="projectId" label="项目编号"></el-table-column>
      <el-table-column prop="projectName" label="项目名称"></el-table-column>
      <el-table-column prop="materialId" label="物料编号"></el-table-column>
      <el-table-column prop="materialName" label="物料名称"></el-table-column>
      <el-table-column prop="propertyId" label="资产编号"></el-table-column>
      <el-table-column prop="buyOrderId" label="采购单号"></el-table-column>
      <el-table-column prop="operationNum" label="操作数量"></el-table-column>
      <el-table-column prop="operationWeight" label="操作重量"></el-table-column>
      <el-table-column prop="billStorage" label="仓库"></el-table-column>
      <el-table-column prop="storageLocation" label="库位"></el-table-column>
      <el-table-column prop="endStorage" label="终点仓"></el-table-column>
      <el-table-column prop="orderId" label="交接单号"></el-table-column>
      <el-table-column prop="situation" label="情况说明"></el-table-column>
    </el-table>

    <el-pagination
     @size-change="sizeData"
     @current-change="pageData"
     :page-sizes="[3,5,8,10]"
     :page-size="3"
     layout="total, sizes, prev, pager, next, jumper"
     :total="count">
   </el-pagination>

  </div>
</template>
<script>
import financeApi from "@/api/finance";

export default {
  data() {
    return {
      //页面数据
    list: [],
      //查询条件
      billDTO: {
        pageNo:1,
        pageSize:3,
        operationType: "",
        planType: "",
        operationTime: "",
      },
      count:0,
      pojo: {
        status: 1,
      },
      dialogFormVisible: false,
      id: "",
      operationType: [],
    };
  },
  created() {
    //在创建vue实例后触发钩子函数
    this.fetchData();
  },
  methods: {
    fetchData() {
      //发起axios请求  获取后端的数据，赋值给模型
      financeApi.bill(this.billDTO).then((response) => {
        this.list = response.data.list;
        this.count = response.data.total;
        console.log("list"+this.list);
      });

      financeApi.opType().then((response) => {
        this.operationType = response.data;
      });
    },

    sizeData(size) {
      this.billDTO.pageSize = size;
      this.fetchData();
    },
    pageData(page) {
      this.billDTO.pageNo = page;
      this.fetchData();
    },
    //新增和修改使用同一个方法打开对话框
    handleEdit() {
      this.dialogFormVisible = true;
      this.billDTO.operationType="",
      this.billDTO.planType="",
      this.billDTO.operationTime=""

    },

  },
};
</script>